import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home'
import Index from '../views/index'
import Product from '../views/product'
import Detail from '../views/detail'
import Login from '../views/login'
import Cart from '../views/order/cart'
import Order from '../views/order/order'
import OrderList from '../views/order/orderList'
import OrderConfirm from '../views/order/orderConfirm'
import OrderPay from '../views/order/orderPay'
import AliPay from '../views/order/aliPay'

Vue.use(VueRouter)

const routes = [{
  // path: '/about',
  // name: 'about',
  // // route level code-splitting
  // // this generates a separate chunk (about.[hash].js) for this route
  // // which is lazy-loaded when the route is visited.
  // component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
  path: '/',
  name: 'home',
  component: Home,
  redirect: '/index',
  children: [
    {
      path: '/index',
      name: 'index',
      component: Index
    }, {
      path: '/detail/:id',
      name: 'detail',
      component: Detail
    }, {
    // 动态定义路由
      path: '/product/:id',
      name: 'product',
      component: Product
    }]
},
{
  path: '/login',
  name: 'login',
  component: Login
},
{
  path: '/cart',
  name: 'cart',
  component: Cart
},
{
  path: '/order',
  name: 'order',
  redirect: '/index',
  component: Order,
  children: [
    {
      path: 'list',
      name: 'orderList',
      component: OrderList
    }, {
      path: 'confirm',
      name: 'orderConfirm',
      component: OrderConfirm
    }, {
      path: 'pay',
      name: 'orderPay',
      component: OrderPay
    }, {
      path: 'alipay',
      name: 'alipay',
      component: AliPay
    }]
}]

const router = new VueRouter({
  routes
})

export default router
